<div class="pm_modal {{ctrl.class}}" role="dialog" style="display: block;">
    <form class="modal-dialog" name="switchPasswordModeForm" ng-submit="ctrl.save()" novalidate>
        <button type="button" ng-click="ctrl.cancel()" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h3 ng-show="ctrl.currentPasswordMode === 1" class="modal-title" translate-context="Title" translate>Switch to Two-Password Mode</h3>
                <h3 ng-show="ctrl.currentPasswordMode === 2" class="modal-title" translate-context="Title" translate>Switch to One-Password Mode</h3>
            </div>
            <div class="modal-body pm_form" ng-show="ctrl.currentPasswordMode === 2">
                <p class="alert alert-info" translate-context="Info" translate>ProtonMail can also be used with a single password which replaces both the login and mailbox password. To switch to single password mode, enter the single password you would like to use and click Save.</p>
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label for="" translate-context="Label" translate>Password</label>
                    </div>
                    <div class="col-2-3">
                        <input type="password" ng-model="ctrl.password" />
                    </div>
                </div>
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label for="" translate-context="Label" translate>Confirm password</label>
                    </div>
                    <div class="col-2-3">
                        <input type="password" ng-model="ctrl.confirmPassword" />
                    </div>
                </div>
            </div>
            <div class="modal-body pm_form" ng-show="ctrl.currentPasswordMode === 1">
                <p class="alert alert-info" translate-context="Info" translate>Two-password mode uses separate passwords for login and mailbox decryption. This provides a minor security benefit in some situations, however we recommend one-password mode for most users. To switch to two password mode, enter the login and mailbox password you would like to use and click Save.</p>
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label for="" translate-context="Title" translate>Login password</label>
                    </div>
                    <div class="col-2-3">
                        <input type="password" ng-model="ctrl.loginPassword" />
                    </div>
                </div>
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label for="" translate-context="Title" translate>Confirm login password</label>
                    </div>
                    <div class="col-2-3">
                        <input type="password" ng-model="ctrl.confirmLoginPassword" />
                    </div>
                </div>
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label for="" translate-context="Title" translate>Mailbox password</label>
                    </div>
                    <div class="col-2-3">
                        <input type="password" ng-model="ctrl.mailboxPassword" />
                    </div>
                </div>
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label for="" translate-context="Title" translate>Confirm mailbox password</label>
                    </div>
                    <div class="col-2-3">
                        <input type="password" ng-model="ctrl.confirmMailboxPassword" />
                    </div>
                </div>
                <div class="alert alert-danger">
                    <ul>
                        <li translate-context="Info" translate>We recommend using different login and mailbox passwords.</li>
                        <li translate-context="Info" translate>Do NOT forget your mailbox password. If you forget it, you will not be able to decrypt your messages.</li>
                        <li translate-context="Info" translate>Save your passwords somewhere safe. Click on <i class="fa fa-eye"></i> icon to confirm you that have typed your password correctly.</li>
                        <li translate-context="Info" translate>We recommend adding a recovery email address first. Otherwise, you cannot recover your account if something goes wrong.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="pm_button modal-footer-button" ng-click="ctrl.cancel()" translate translate-context="Action">Cancel</button>
            <button type="submit" class="pm_button primary modal-footer-button disabled-if-network-activity" translate translate-context="Action">Submit</button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
